<template>
  <div class="margin1-top">
    <div class="title-row">
      <div class="title-left">主管单位</div>
      <div v-for="(item,index) in zgdw" :key="index"><a :class="{blue: changeZgdw == index}"
          @click="change1(index)">{{item.name}}</a></div>
    </div>
    <div class="title-row">
      <div class="title-left">建设性质</div>
      <div v-for="(item,index) in jsxz" :key="index"><a :class="{blue: changeJsxz == index}"
          @click="change2(index)">{{item.name}}</a></div>
    </div>
    <div class="title-row">
      <div class="title-left">管理类型</div>
      <div v-for="(item,index) in gllx" :key="index"><a :class="{blue: changeGllx == index}"
          @click="change3(index)">{{item.name}}</a></div>
    </div>
    <div class="title-row">
      <div class="title-left">年份</div>
      <div v-for="(item,index) in nf" :key="index"><a :class="{blue: changeNf == index}" @click="change4(index)">{{item.name}}</a>
      </div>
    </div>
    <div class="title">
      <span>报告管理</span>
    </div>
    <div>
      <!-- 卡片列表切换 -->
      <card-list :list="list" :no="4">roub
        <el-row :gutter="21" style="display: flex; justify-content: center; flex-wrap: wrap;">
          <el-col :span="7" v-for="(item,index) in list" :key="index">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <router-link to="/biddetail"><span style="display: flex; justify-content: center; align-items: center; color: blue;">{{item.title}}</span></router-link>
              </div>

              <!--竖表格-->
              <div style="width: 100%;">
                <el-col style="margin-bottom: 15px;">
                  <div class="box" v-for="(item2, index) in item.tableArr" :key="index">
                    <div class="content1">{{ item2.key }}</div>
                    <div class="content2">{{ item2.value == "" ? "待完善" : item2.value }}</div>
                  </div>
                </el-col>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </card-list>
    </div>
    <!--分页-->
    <div style="float: right;">
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import cardList from '@/components/card/index.vue'
  export default {
    components: {
      cardList
    },

    methods: {
      sjbxz() {
        //如果存在删除文件
        this.$http.post(process.env.VUE_APP_BASE_API + "/common/delete", {
          sPath: "C:/hjxr/uploadPath/upload/襄阳市疾病预防控制中心迁建项目"
        }).then(res => {
          console.log(res)
          //重新下载文件
          this.$http.get(process.env.VUE_APP_BASE_API + "/common/compress", {
            params: {
              str: "sjb"
            }
          }).then(res => {
            this.download(res.body.msg)
          })
        })
      },
      zlxz() {
        //删除源文件
        this.$http.post(process.env.VUE_APP_BASE_API + "/common/delete", {
          sPath: "C:/hjxr/uploadPath/upload/襄阳市疾病预防控制中心迁建项目"
        }).then(res => {
          console.log(res)
        })
        //重新下载
        this.$http.get(process.env.VUE_APP_BASE_API + "/common/compress", {
          params: {
            str: "fjzl"
          }
        }).then(res => {
          this.download(res.body.msg)
        })
      },
      change1(index) {
        this.changeZgdw = index
      },
      change2(index) {
        this.changeJsxz = index
      },
      change3(index) {
        this.changeGllx = index
      },
      change4(index) {
        this.changeNf = index
      }
    },

    data() {
      return {

        changeZgdw: 0,
        changeJsxz: 0,
        changeGllx: 0,
        changeNf: 0,
        zgdw: [{
            no: 1,
            name: "不限",
            active: true
          },
          {
            no: 2,
            name: "市财政局",
            active: false
          },
          {
            no: 3,
            name: "市科技局",
            active: false
          },
          {
            no: 4,
            name: "市人社局",
            active: false
          },
          {
            no: 5,
            name: "市招商局",
            active: false
          },
          {
            no: 6,
            name: "市自然规划局",
            active: false
          }
        ],

        jsxz: [{
            no: 1,
            name: "不限"
          },
          {
            no: 2,
            name: "新建项目"
          },
          {
            no: 3,
            name: "续建项目"
          },
          {
            no: 4,
            name: "扩建项目"
          },
          {
            no: 5,
            name: "恢复项目"
          }
        ],
        gllx: [{
            no: 1,
            name: "不限"
          },
          {
            no: 2,
            name: "征询意见稿"
          },
          {
            no: 3,
            name: "审计意见"
          },
          {
            no: 4,
            name: "审计报告"
          }
        ],

        nf: [{
            no: 1,
            name: "不限"
          },
          {
            no: 2,
            name: "2018年"
          },
          {
            no: 3,
            name: "2019年"
          },
          {
            no: 4,
            name: "2020年"
          },
          {
            no: 5,
            name: "2021年"
          }
        ],
        list: [{
            title: "襄阳市疾病预防控制中心迁建项目",
            tableArr: [{
                key: "项目阶段",
                value: "可行性研究阶段"
              },
              {
                key: "需完成的批复和手续",
                value: "选址意见书"
              },
              {
                key: "发布时间",
                value: "2020-05-06"
              }
            ],
            dm: "XY_0001",

            t1: "项目名称",
            jd: "可行性研究阶段",
            wt: "0 / 0",
            pfsx: "选址意见书",
            cz1: "审核",
            cz2: "发布",
            cz3: " 修改",
            fbrq: "2020-05-06"
          },
          {
            title: "襄阳市疾病预防控制中心迁建项目",
            tableArr: [{
                key: "项目阶段",
                value: "可行性研究阶段"
              },
              {
                key: "需完成的批复和手续",
                value: "选址意见书"
              },
              {
                key: "发布时间",
                value: "2020-05-06"
              }
            ],

            dm: "XY_0001",
            jd: "可行性研究阶段",
            wt: "0 / 0",
            pfsx: "选址意见书",
            cz1: "审核",
            cz2: "发布",
            cz3: " 修改",
            fbrq: "2020-05-06"
          },
          {
            title: "襄阳市疾病预防控制中心迁建项目",
            tableArr: [{
                key: "项目阶段",
                value: "可行性研究阶段"
              },
              {
                key: "需完成的批复和手续",
                value: "选址意见书"
              },
              {
                key: "发布时间",
                value: "2020-05-06"
              }
            ],

            dm: "XY_0001",

            jd: "可行性研究阶段",
            wt: "0 / 0",
            pfsx: "选址意见书",
            cz1: "审核",
            cz2: "发布",
            cz3: " 修改",
            fbrq: "2020-05-06"
          },
          {
            title: "襄阳市疾病预防控制中心迁建项目",
            tableArr: [{
                key: "项目阶段",
                value: "可行性研究阶段"
              },
              {
                key: "需完成的批复和手续",
                value: "选址意见书"
              },
              {
                key: "发布时间",
                value: "2020-05-06"
              }
            ],

            dm: "XY_0001",
            jd: "可行性研究阶段",
            wt: "0 / 0",
            pfsx: "选址意见书",
            cz1: "审核",
            cz2: "发布",
            cz3: " 修改",
            fbrq: "2020-05-06"
          },
          {
            title: "襄阳市疾病预防控制中心迁建项目",
            tableArr: [{
                key: "项目阶段",
                value: "可行性研究阶段"
              },
              {
                key: "需完成的批复和手续",
                value: "选址意见书"
              },
              {
                key: "发布时间",
                value: "2020-05-06"
              }
            ],

            dm: "XY_0001",

            jd: "可行性研究阶段",
            wt: "0 / 0",
            pfsx: "选址意见书",
            cz1: "撤销",
            fbrq: "2020-05-06"
          },
          {
            title: "襄阳市疾病预防控制中心迁建项目",
            tableArr: [{
                key: "项目阶段",
                value: "可行性研究阶段"
              },
              {
                key: "需完成的批复和手续",
                value: "选址意见书"
              },
              {
                key: "发布时间",
                value: "2020-05-06"
              }
            ],

            dm: "XY_0001",

            jd: "可行性研究阶段",
            wt: "0 / 0",
            pfsx: "选址意见书",
            cz1: "撤销",
            fbrq: "2020-05-06"
          }
        ],
      }
    }
  }

</script>

<style lang="less" scoped>
  .margin1-top{
    margin-top: 65px;
  }
  
  .title-row {
    background-color: #F3F3F3;
    display: flex;
    align-items: center;
  }

  .title-row div {
    padding: 10px;
  }

  .title-left {
    background-color: #DBDBDB;
    width: 200px;
    text-align: center;
  }

  .text {
    font-size: 14px;
  }

  .title {
    font-size: 25px;
    color: #000000;
    margin-left: 25px;
    font-weight: 600;
    margin-top: 30px;
    margin-left: 100px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 360px;
    margin: 10px;
  }

  #app {
    width: 100%;
    padding: 10px;
  }

  .box {
    width: 100%;
    height: 40px;
    display: flex;
    border-left: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
  }

  .content1 {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    color: #333;
    font-size: 14px;
  }

  .content2 {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    color: #b0b0b2;
    font-size: 14px;
  }

  .btn_1 {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .head_btn {
    display: flex;
    justify-content: center;
  }

  .tb_cls {
    margin-top: 20px;
  }

  .card_cls {
    margin-top: 10px;
  }
  .blue {
    color: blue;
  }

</style>
